<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <image class="back-icon" src="/static/jiantou2_1.png" @click="handleBack"></image>
      <text class="title">助教详情</text>
      <view class="right-space"></view>
    </view>

    <!-- 助教信息区域 -->
    <view class="assistant-info">
      <image class="avatar" src="/static/logo.png"></image>
      <view class="info-content">
		   <text class="name">妮妮</text>
        <view class="name-container">
		  <image class="verified-icon" src="/static/zhanghaoanquan_1.png"></image>
        <text class="phone">12356666</text>
		</view>
        
      </view>
      <view class="store-info">
       <!-- <image class="location-icon" src="/static/Group_427319264.png"></image>
        <text class="store-name">下沙店</text> -->
      </view>
    </view>

    <!-- 今日数据区域 -->
    <view class="data-section">
    
	  <view class="data-top">
		    <view class="section-title">今日数据</view>
			<view class="gengduo">
				<view class="gengduo-text">更多数据</view>
				<view class="gengduo-ico"><image src="/static/jiantou2_3.png"></image></view>
			</view>
		  
		  
	  </view>
      <view class="data-grids">
        <view class="data-items" v-for="(item, index) in dataItems" :key="index">
          <view class="data-value">{{ item.value }}</view>
          <view class="data-label">{{ item.label }}</view>
        </view>
      </view>
    </view>

    <!-- 功能操作区域 -->
    <view class="function-section">
      <text class="section-title">功能操作</text>
      <view class="function-grid">
        <view class="function-item" v-for="(item, index) in functionItems" :key="index">
          <image class="function-icon" :src="item.icon"></image>
          <text class="function-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 技能列表区域 -->
    <view class="skill-section">
      <view class="section-title">技能列表</view>
      <view class="skill-item" v-for="(item, index) in skillItems" :key="index">
        <view class="skill-info">
			<view class="skill-img"> <image class="skill-icon" :src="item.icon"></image></view>
			<view class="skill-ui">
				
				<view class="skill-name">{{ item.name }}</view>
				<view class="skill-text">安营收市场给佣金</view>
			</view>
         
          
        </view>
        <view class="skill-prices">
          <view class="price-minute">{{ item.pricePerMinute }}/分钟</view>
          <view class="price-hour">{{ item.pricePerHour }}/分钟</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataItems: [
        { label: '优惠金额', value: '0' },
        { label: '营收金额', value: '113.34' },
        { label: '优惠时长', value: '0h' },
        { label: '营收时长', value: '1.26h' }
      ],
      functionItems: [
        { name: '管理员工', icon: '/static/guanliyuan-2 1.png' },
        { name: '就近订单', icon: '/static/dingdan-4 1.png' }
      ],
      skillItems: [
        { 
          name: '上课', 
          icon: '/static/Icon.png', 
          pricePerMinute: '1.49元', 
          pricePerHour: '1.23元' 
        }
      ]
    };
  },
  methods:{
	  handleBack() {
	    uni.navigateBack();
	  }
  }
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  // background-color: #f5f5f5;
  background-image: url('/static/Group_427319262.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

// 顶部导航栏
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 120rpx;
  background-image: url('/static/Group_427319262.png');
  background-size: cover;
  // background-position: center;
  background-repeat: no-repeat;
  padding: 0 40rpx;
  position: fixed;
  box-sizing: border-box;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  .back-icon {
    width: 40rpx;
    height: 40rpx;
  }

  .title {
    font-size: 40rpx;
    color: #000;
    font-weight: bold;
  }

  .right-space {
    width: 40rpx;
  }
}

// 助教信息区域
.assistant-info {
  display: flex;
  padding: 40rpx;
  margin-top: 120rpx;
  // background-color: #fff;
  // border-bottom: 1rpx solid #f0f0f0;

  .avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 26rpx;
  }

  .info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
      .name {
        font-size: 40rpx;
        font-weight: bold;
        color: #000;
    
      }
    .name-container {
		margin-top: 6rpx;
      display: flex;
      align-items: center;

width: 228rpx;
height: 46rpx;
background: #E6FBF1;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 1rpx solid #93E5C0;
// padding: 12rpx 14rpx;
box-sizing: border-box;

      .verified-icon {
		  box-sizing: border-box;
        width: 32rpx;
        height: 32rpx;
		margin-left: 12rpx;
		margin-right: 10rpx;
      }
	  .phone {
	    font-size: 28rpx;
	    color: #1EBE76;
	  }
    }


  }

  .store-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;

    .location-icon {
      width: 32rpx;
      height: 32rpx;
      margin-bottom: 10rpx;
    }

    .store-name {
      font-size: 28rpx;
      color: #666;
      background-color: rgba(30, 190, 118, 0.1);
      padding: 5rpx 15rpx;
      border-radius: 20rpx;
    }
  }
}

// 今日数据区域
.data-section {
 width: 710rpx;
 height: 204rpx;
 margin: 0 20rpx;
 box-sizing: border-box;
  background-image: url('/static/Rectangle_34624259.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
padding: 20rpx 36rpx;
.data-top{
	margin-bottom: 34rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
  .section-title {
    font-size: 28rpx;
    color: #0A2016;
    // margin-bottom: 30rpx;
    font-weight: bold;
  }
  .gengduo{
	  display: flex;
	  .gengduo-text{
		  color: #666666;
		  font-size: 24rpx;
	  }
	  .gengduo-ico{
		  width: 24rpx;
		  height: 24rpx;
		  image{
			  width: 24rpx;
			  height: 24rpx;
		  }
	  }
  }
}


  .data-grids {
    display: flex;
    justify-content: space-around;
    // flex-wrap: wrap;
  }

  .data-items {
    // width: calc(50% - 20rpx);
    margin-bottom: 20rpx;
    text-align: center;

    .data-value {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .data-label {
      font-size: 28rpx;
      color: #666;
    }
  }
}

// 功能操作区域
.function-section {
  margin: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 16rpx;
 
  padding:20rpx 36rpx;

  .section-title {
    font-size:28rpx;
    color: #0A2016;
    margin-bottom: 36rpx;
    font-weight: bold;
  }

  .function-grid {
    display: flex;
    // justify-content: space-between;
  }

  .function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 0;
	box-sizing: border-box;
	margin-right: 56rpx;
    .function-icon {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 20rpx;
    }

    .function-name {
      font-size: 24rpx;
      color: #222222;
      font-weight: bold;
    }
  }
}

// 技能列表区域
.skill-section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx 36rpx 42rpx 36rpx;

  .section-title {
    font-size: 28rpx;
    color: #0A2016;
    margin-bottom: 34rpx;
    font-weight: bold;
  }

  .skill-item {
    display: flex;
    justify-content: space-between;
    // align-items: center;
    // padding: 20rpx 0;

    .skill-info {
      display: flex;
      // align-items: center;
box-sizing: border-box;
      .skill-icon {
        width: 56rpx;
        height: 56rpx;
        margin-right: 20rpx;
      
      }
.skill-ui{
	margin-top: 8rpx;
	.skill-name {
	  font-size: 28rpx;
	  color: #101010;
	  font-weight: bold;
	}
	.skill-text{
		color: #666666;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
}

    }

    .skill-prices {
		box-sizing: border-box;
      // display: flex;
      // flex-direction: column;
      // align-items: flex-end;
margin-top: 8rpx;
      .price-minute {
       font-size: 24rpx;
       color: #666666;
        margin-bottom: 18rpx;
      }

      .price-hour {
      font-size: 24rpx;
      color: #666666;
      }
    }
  }
}
</style>